<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>HELLO WORLD</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=e7aa32db2e826fe71873ce8d58d0d1a2">
    </script>
    <script>
        var map;
        var zoom = 12;
        var scale = new T.Control.Scale();
        var miniMap = new T.Control.OverviewMap({
            isOpen: true,
            size: new T.Point(150, 150)
        });
        var military = new T.Control.militarySymbols({
            position: T_ANCHOR_TOP_LEFT
        }); //标绘控件
        var ctrl = new T.Control.MapType(); //源控件
        var menu = new T.ContextMenu({
            width: 140
        }); //右键菜单
        var zoomControl=new T.Control.Zoom();
        zoomControl.setPosition({position: T_ANCHOR_TOP_RIGHT});
        var txtMenuItem = [{
                text: '放大',
                callback: function () {
                    map.zoomIn()
                }
            },
            {
                text: '缩小',
                callback: function () {
                    map.zoomOut()
                }
            },
            {
                text: '放置到最大级',
                callback: function () {
                    map.setZoom(18)
                }
            },
            {
                text: '查看全国',
                callback: function () {
                    map.setZoom(4)
                }
            },
            {
                text: '获得右键点击处坐标',
                isDisable: false,
                callback: function (lnglat) {
                    alert(lnglat.getLng() + "," + lnglat.getLat());
                }
            }
        ];
        for (var i = 0; i < txtMenuItem.length; i++) {

            //添加菜单项
            var item = new T.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback);
            //item.disable();
            menu.addItem(item);
            if (i == 1 || i == 3) {
                //添加分割线
                menu.addSeparator();
            }
        }
        //各种工具
        var handler;
        var config = {
            showLabel: true,
            color: "blue",
            weight: 3,
            opacity: 0.5,
            fillColor: "#FFFFFF",
            fillOpacity: 0.5
        };
        polygonTool = new T.PolygonTool(map, config);

        function openPolygonTool() {
            if (handler) handler.close();
            handler = new T.PolygonTool(map);
            handler.open();
        }

        function openPolylineTool() {
            if (handler) handler.close();
            handler = new T.PolylineTool(map);
            handler.open();
        }

        function openMarkerTool() {
            if (handler) handler.close();
            handler = new T.MarkTool(map, {
                follow: true
            });
            handler.open();
        }

        function openRectangleTool() {
            if (handler) handler.close();
            handler = new T.RectangleTool(map, {
                follow: true
            });
            handler.open();
        }

        function openCircleTool() {
            if (handler) handler.close();
            handler = new T.CircleTool(map, {
                follow: true
            });
            handler.open();
        }

        function getLayerCount() {
            return map.getOverlays().length;

        }

        function onLoad() {
            map = new T.Map('mapDiv', {
                datasourcesControl: true
            });
            map.centerAndZoom(new T.LngLat(114.5, 30.5), zoom);
            //添加比例尺控件
            map.addControl(scale);
            map.addControl(miniMap);
            map.addControl(military);
            map.addControl(ctrl);
            map.addContextMenu(menu);
            map.enableScrollWheelZoom();
            map.addControl(zoomControl);
        }
    </script>
    <style>
        .map {
            position: absolute;
            top: 28px;
            bottom: 0%;
            right: 0%;
            left: 0%;
        }

        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0%;
            font-family: "Microsoft YaHei"
        }

        .buttons {
            position: absolute;
            width: 100%;
        }
    </style>
</head>

<body onLoad="onLoad()">
    <div id="mapDiv" class="map"></div>
    <div id="buttons">
        <input type="button" value="点工具" onClick='openMarkerTool() ' />
        <input type="button" value="多边形工具" onClick='openPolygonTool() ' />
        <input type="button" value="线工具" onClick='openPolylineTool() ' />
        <input type="button" value="矩形工具" onClick='openRectangleTool() ' />
        <input type="button" value="画圆工具" onClick='openCircleTool() ' />
        <input type="button" value="获取图层个数" onClick='alert(getLayerCount()) ' />
        <input type="button" value="清除所有" onClick='map.clearOverLays()' />
    </div>
</body>

</html>